$(function () {

    var liWidth = $('#nav ul li').width();
    var ulWidth = $('#nav ul').width();
    var navWidth = $('#nav').width();
    var navCenter = navWidth / 2;

    $('#nav ul').on('click', 'li', function () {
        $(this).addClass('active').siblings('li').removeClass('active firstLi');
        var current = 0;
        var liCenter = $(this).offset().left - $(this).parent().offset().left + (liWidth / 2);
        var minPosition = navCenter - liCenter;
        var maxPosition = navWidth - ulWidth;
        if (minPosition > 0) {
            current = 0
        }
        if (minPosition < 0) {
            if (minPosition > maxPosition) {
                current = minPosition
            } else {
                current = maxPosition
            }
        }
        $(this).parent().css({
            'transform': 'translateX(' + current + 'px)',
            'tansition': 'all 0.2s'
        })

        console.log("li元素的宽度" + liWidth)
        console.log("ul元素的宽度" + ulWidth)
        console.log("nav元素的宽度" + navWidth)
        console.log("nav中心点距离" + navCenter)
        console.log("liCenter中心点距离" + liCenter)
    })
})